
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><%-- ${fn:length(list)} --%>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<style>
.b {background: red;}
.null{background:#bbbbbb;}
.a{cursor:pointer}
</style>
<script type="text/javascript">
	var ta = [];	
	var seatflag="true";
	var count='${requestScope.infoMap.count}';	// 선택 인원수
	var reserInfo= '${requestScope.info }';
	var conseat='${requestScope.seatList}';
	var seat=[];
	var new_win="";
	$(document).ready(function() {	
		// 선택된 좌석 
		seat=conseat.split(",");
		for(i=0; i<seat.length-1;i++){
			$("#"+seat[i]+"").removeClass("a").addClass("b");
		}
		$(".b").click(function(){
			alert("이미 예약된자리 입니다!");
		}); 		
			$(".a").toggle(function() { 			
					if(seatflag=="true" && ta.length<count){
						$(this).css("background", "yellow");
						ta.push($(this).text());							
					}else{
						seatflag="false"; //더이상 자리선택 못하게 한다
					}											
			}, function() {				
						seatflag="true";
						$(this).css("background", "white");
						var i = $.inArray($(this).text(), ta) // 몇번째 인덱스인지
						if(i==-1){
							return false;
						}else{
							ta.splice(i, 1); // ta 배열에서 첫번째 1 인텍스부터 두번째, 1개 삭제
						}
			});//toggle		
			
			$("#ticketing").click(function(){				
				if(ta.length<count){
					alert(count-ta.length+" 좌석을 더 선택해주세요!");
					return false;
				}
				// 선택한 좌석
				var seat= ta.toString();
				reserInfo=reserInfo+"&seat="+seat;		
				// 팝업창... 
				$("#ticketing").hide();		
				$("#backBtn").hide();
				new_win=window.open("reservation.do?command=credit_pop"+reserInfo, 
															"accounts", "resizable=no,toolbar=no,height=300px, width=600px");	
			}); // click 			
			$("#backBtn").click(function(){
				location.href="reservation.do?command=reservation";
			});
	});//ready
	
</script>
<font class="title">예매 하기 > 좌석 선택</font>
<hr color="#f5f5f5">
<c:choose>
	<c:when test="${sessionScope.vo!=null }">
		
		<form name="seatForm" method="POST">
		<div id="pop" style="display: none"></div>
		<table border="0"  width="600px">
			<tr align="center">
				<td></td><td colspan="1" bgcolor="#bbbbbb" ><b><font color="black">SCREEN</font></b></td>
			</tr>
			<tr align="center">
				<td>A</td>
				<td  rowspan="5">
					<table border="1" width="100%" height="250px" cellpadding="0" cellspacing="0">
					      <tbody id="seat">
					      <c:forTokens var="line" items="A,B,C,D,E" delims="," varStatus="idx" >     
					      <tr align="center" id="${line }" >  
					       <td id="${line }01" class="a">${line }01</td>  <td id="${line }02" class="a">${line }02</td>
					       <c:if test="${line =='A'}">
					       <td class="null" rowspan="5">&nbsp;&nbsp;&nbsp;&nbsp;</td>
					       </c:if>
					       <td id="${line }03" class="a">${line }03</td>  <td id="${line }04" class="a">${line }04</td> <td id="${line }05" class="a">${line }05</td>
					       <td id="${line }06" class="a">${line }06</td> <td id="${line }07" class="a">${line }07</td>  <td id="${line }08" class="a">${line }08</td> 
					       <c:if test="${line =='A'}">
					       <td class="null" rowspan="5">&nbsp;&nbsp;&nbsp;&nbsp;</td>
					       </c:if>
					       <td id="${line }09" class="a">${line }09</td> <td id="${line }10" class="a">${line }10</td>
					      </tr>
					      </c:forTokens>  
					      </tbody>
				    </table>
				</td>
			</tr>
			<tr align="center"><td>B</td></tr>	<tr align="center"><td>C</td></tr>	
			<tr align="center"><td>D</td></tr>	<tr align="center">	<td>E</td></tr>
						<tr align="center">
				<td colspan="2"><img src="img/redbox.png">예약불가능 <img src="img/whitebox.png">예약가능 </td>
			</tr>
			<tr align="center">
				<td colspan="2">${requestScope.infoMap.count} 좌석을 선택해 주십시요.</td>
			</tr>
			
		</table>
		<span id="btnSpan">
		<input type="button" id="ticketing" calss="popup" value="예매하기">
		</span>
		<input type="button" id="backBtn" value="이전으로">
		</form>
	</c:when>
	<c:otherwise>
		회원전용 페이지입니다....
		<a href="index.jsp">인덱스 페이지로</a>
	</c:otherwise>
</c:choose>